<template>
    <d2-container>
        <!-- 搜索表头 -->
        <template slot="header">
            <el-form :inline="true" :model="searchForm" ref="searchForm" size="small" 
                v-if="showHeader" class="searchHeader">

                <el-form-item label="所属集团" prop="pkGroup">
                    <ec-group-tree-select ref="groupSelectTree" v-model="searchForm.pkGroup">
                    </ec-group-tree-select>
                </el-form-item>

                <el-form-item label="所属组织" prop="pkOrg">
                    <ec-org-tree-select ref="orgSelectTree" v-model="searchForm.pkOrg"
                        :pkGroup="searchForm.pkGroup"></ec-org-tree-select>
                </el-form-item>


                <el-form-item label="账号类型" prop="type">
                    <ec-dict-select v-model="searchForm.type" placeholder="请选择账号类型" dictType="account_type">
                    </ec-dict-select>
                </el-form-item>

                <el-form-item label="账号字符" prop="account">
                    <el-input v-model="searchForm.account" placeholder="请输入账号字符" clearable />
                </el-form-item>

                <el-form-item label="用户名" prop="username">
                    <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
                </el-form-item>

                 <el-form-item label="用户编号" prop="userId">
                    <el-input v-model="searchForm.userId" placeholder="请输入用户编号" clearable />
                </el-form-item>

                <el-form-item label="操作">
                    <el-button type="primary" @click="getDataTable">
                        <d2-icon name="search" />
                        查询
                    </el-button>
                    <el-button @click="handleFormReset">
                        <d2-icon name="refresh" />
                        重置
                    </el-button>
                </el-form-item>

            </el-form>
        </template>

        <!-- 表格表头 -->
        <div class="table-header">
            <div>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addOrUpdate()">添加
                </el-button>
                
                <!-- <el-dropdown split-button type="primary" @command="genLoginAccount" size="small" v-if="isAuth()"
                    style="margin-left:15px;">
                    账号
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="PHONE">删除</el-dropdown-item>
                        <el-dropdown-item command="IDCARD">锁定</el-dropdown-item>
                        <el-dropdown-item command="EMAIL">重置密码</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
            </div>
            <div>
                <ec-prompt-button content="刷新" icon="el-icon-refresh" @click="getDataTable()"></ec-prompt-button>
                <ec-prompt-button content="搜索" icon="el-icon-search" @click="changeHeader()"></ec-prompt-button>
                <ec-prompt-button content="导入" icon="el-icon-download"></ec-prompt-button>
                <ec-prompt-button content="导出" icon="el-icon-upload2"></ec-prompt-button>
                <ec-prompt-button content="分享" icon="el-icon-share"></ec-prompt-button>
            </div>
        </div>


        <!-- 表格表体 -->
        <ec-table :data="tableData" v-loading="pageTableLoading" >
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="groupName" header-align="center" align="center" show-overflow-tooltip label="所属集团">
            </el-table-column>
            <el-table-column prop="orgName" header-align="center" align="center" show-overflow-tooltip label="所属组织">
            </el-table-column>
            <el-table-column prop="userId" header-align="center" align="center" show-overflow-tooltip label="用户编号">
            </el-table-column>
            <el-table-column prop="username" header-align="center" align="center" show-overflow-tooltip label="用户名">
            </el-table-column>
            <el-table-column prop="typeDesc" header-align="center" align="center" show-overflow-tooltip label="类型">
            </el-table-column>
            <el-table-column prop="account" header-align="center" align="center" show-overflow-tooltip label="账号">
            </el-table-column>
            <el-table-column prop="flagDesc" header-align="center" align="center" show-overflow-tooltip
                label="账号状态">
                <!-- <template slot-scope="scope">
                    {{scope.row.flagDesc}}
                    <el-tag :type="scope.row.lockFlag === '0' ? 'success' : 'danger'" disable-transitions>{{scope.row.lockFlagDesc}}
                    </el-tag> 
                </template>-->
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="180" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="resetPassword(scope.row.userId)">重置密码
                    </el-button>
                    <!-- <el-button type="text" size="small" @click="addOrUpdate(scope.row.userId)">修改
                    </el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button> -->
                </template>
            </el-table-column>
        </ec-table>

        <!-- 表格表尾 -->
        <template slot="footer">
            <ec-pagination :page="page" :sizes="pageSizes" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </ec-pagination>
        </template>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataTable"></add-or-update>
    </d2-container>
</template>

<script>
    import * as userAccountService from '@/api/upms/useraccount'
    import * as userService from '@/api/upms/user'
    import AddOrUpdate from './add-or-update'
    import PageTableMixin from '@/mixin/page-table'

    export default {
        name: "upms-account-index",
        mixins: [PageTableMixin],
        data() {
            return {
                searchForm: {
                    pkGroup: '',
                    pkOrg: '',
                    type: '',
                    username: '',
                    userId: '',
                    type: ''
                },
                addOrUpdateVisible: false
            }
        },
        components: {
            AddOrUpdate
        },
        mounted() {
            this.getDataTable()
        },
        methods: {
            // 获取数据列表
            getDataTable() {
                this.openPageTableLoading();
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    pkGroup: this.searchForm.pkGroup,
                    pkOrg: this.searchForm.pkOrg,
                    type: this.searchForm.type,
                    username: this.searchForm.username,
                    userId: this.searchForm.userId,
                    account: this.searchForm.account,
                };
                userAccountService.getuseraccountpage(query).then(data => {
                    this.setPageTableData(data)
                }).catch((res) => {
                    this.closePageTableLoading()
                });
            },
            // 新增 / 修改
            addOrUpdate(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            resetPassword(userId) {
                userService.resetPassword(userId).then(data => {
                    if (data.code == '200') {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: data.msg,
                            type: 'warning'
                        });
                    }

                })
            },
            // 删除
            deleteHandle(id) {
                if (id) {
                    this.$confirm("确认删除？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        userService.deluser(id).then(() => {
                            this.getDataTable();
                        });
                    });
                }
            }
        }
    }
</script>